<template>
  <div ref="bar" class="charts chart-bar" id="barmain"></div>
</template>

<script>
import echarts from 'echarts'
import util from '@/utils'
export default {
    name: 'ChartBar',
    data () {
        return {
            myChart: '',
            checkedIndexList: []
        }
    },
    props: {
        data: Array
    },
    mounted () {
        this.$nextTick(() => {
            this.init()
        })
    },
    watch: {
        data () {
            this.init()
        }
    },
    methods: {
        init () {
            let _this = this
            this.myChart = echarts.init(document.getElementById('barmain'))
            let valueData = []
            let nameData = []
            for (let item of _this.data) {
                valueData.push(item.value)
                nameData.push(item.name)
            }
            let option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    position: 'top'
                },
                yAxis: {
                    type: 'category',
                    data: nameData,
                    triggerEvent: true,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                series: [
                    {
                        type: 'bar',
                        data: valueData,
                        barWidth: '50%',
                        itemStyle: {
                            normal: {
                                color: function (param) {
                                    return _this.checkedIndexList.indexOf(param.dataIndex) > -1
                                        ? '#d53a35'
                                        : '#ff8a86'
                                }
                            },
                            emphasis: {
                                color: 'red'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter: '{c}'
                            }
                        }
                    }
                ],
                title: {
                    text: '事件',
                    x: 'center'
                },
                tooltip: {
                    formatter: '{b} : {c}'
                }
            }
            this.myChart.setOption(option)
            for (let i = 0; i < this.data.length; i++) {
                this.myChart.dispatchAction({ type: 'downplay', dataIndex: i })
            }
            this.myChart.off('click')
            this.myChart.on('click', function (params) {
                let dataIndex
                if (params.componentType === 'yAxis') {
                    // 点击Y轴刻度文字
                    for (let i = 0; i < nameData.length; i++) {
                        if (nameData[i] === params.value) {
                            dataIndex = i
                        }
                    }
                } else if (params.componentType === 'series') {
                    dataIndex = params.dataIndex
                }
                let isChecked = _this.verifyIsChecked(dataIndex)
                if (isChecked) {
                    for (let i = 0; i < _this.checkedIndexList.length; i++) {
                        if (_this.checkedIndexList[i] === dataIndex) {
                            _this.myChart.dispatchAction({
                                type: 'downplay',
                                dataIndex: dataIndex
                            })
                            _this.checkedIndexList.splice(i, 1)
                            break
                        }
                    }
                } else {
                    _this.myChart.dispatchAction({
                        type: 'highlight',
                        dataIndex: dataIndex
                    })
                    _this.checkedIndexList.push(dataIndex)
                }
                _this.$emit('barClick', _this.getUriList(_this.checkedIndexList))
            })
        },
        resize () {
            this.$nextTick(() => {
                this.myChart.resize()
                this.init()
            })
        },
        clearData () {
            this.checkedIndexList = []
            this.init()
        },
        verifyIsChecked (index) {
            let flag = false
            if (this.checkedIndexList.indexOf(index) > -1) flag = true
            return flag
        },
        getUriList (indexList) {
            let a = []
            for (let i of indexList) {
                a.push(this.data[i].uri)
            }
            return a
        }
    }
}
</script>

<style lang="less" scoped>
.chart-bar {
  width: 100%;
  height: 300px;
}
</style>
